@import "function";
@import url(reset.css);
@import url(font.css);
@import url(typo.css);
@import "compass/css3/border-radius";
@import "base";

.container{ overflow:hidden;}
/***************** SETTING WIDTH FOR HEADER - CONTENT - FOOTER  ********************/
.header,
.content,
.slider,
.footer{width:980px; margin:0px auto; padding:0 5px; }
/***************** COLUMN SETTING ********************/
/***************** HEADING SETTING ********************/
.heading{
	display:block;	
	border-bottom:1px solid #d7d7d7;
	margin-bottom:10px;	
	h2{		
		float:left;
		color:#698100;
		font-size:22px;
		line-height:22px;
		@include font-1;
		padding-bottom:8px;
	}	
}
.heading-1{
	display:block;		
	@include bg('imgHeading-bg.png');
	h2{		
		float:left;
		color:#9ec300;
		font-size:18px;
		line-height:35px;
		@include font-1;
		padding-left:12px;
	}	
}
.more-link{
	@include bg('imgArrow-1.png',left,center);
	padding-left:15px;
	color:#007698 !important;
	&:hover{ text-decoration:underline; color:#007698;}
}

/***************** HEADER SETTING *********************/
.header{ display:block;
	
}
.logo{
	float:left;
	display:block;	
	//width:100px;
	height:38px;
	h2{
		display:block;
		width:104px;
		height:36px;
		margin-top:1px;
		a{
			text-indent:-9999px;
			display:block;
			@include bg('imgLogo.png');
			width:104px;
			height:36px;
		}
	}
}
.navigation{
	display:block;
	float:left;
	ul{ margin:0; padding:0;}	
}
.navigation,.navigation ul li a{height:38px;}
.navigation{position:relative;width:980px;margin:18px auto 0;z-index:10;-khtml-border-radius:5px;-ms-border-radius:3px;-o-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-o-border-radius:5px;-khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px;-ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px;-o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px;-moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px;-webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px;box-shadow:rgba(0,0,0,0.3) 0 1px 2px;font:12px/38px Arial, Helvetica,Verdana,sans-serif;}
.navigation ul li a {background:url("../images/top_nav_bar.png") no-repeat; text-transform: uppercase;}
.navigation ul{position:relative;margin:0;padding:0;zoom:1;z-index:3;}
.navigation ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.navigation ul li{display:block;}
.navigation ul li a{float:left;width:123px; text-align: center; background-position:-118px 0;cursor:pointer;overflow:hidden; color:#fff; line-height: 38px;text-shadow: 1px 1px 0px #343e00;}
.navigation ul li.first-item a{background-position:0 0; width: 118px;}
.navigation ul li a:hover,.navigation ul li a:focus{background-position:0px -38px; text-decoration: none;}
.navigation li.first-item a:hover,.navigation li.first-item a:focus, .navigation li.first-item a:active{background-position:-123px -38px;}
.navigation li.first-item.current_page_item a {background-position:0 -76px;}
.navigation ul li.current_page_item a {background-position:-118px -76px;}
.navigation ul li.last-item a{ width: 124px; background-position: 0 -114px;}
.navigation ul li.last-item a:hover, .navigation li.last-item a:focus, .navigation li.last-item a:active{ background-position: -124px -114px;}
.navigation li.last-item.current_page_item a {background-position:0 -152px;}

/***************** SLIDER SETTING ********************/
.slider{ 
	display:block; margin:14px 0;
	position:relative;
	z-index:1;
	#welcome{
		position:absolute;
		z-index:50;
		left:35px;
		top:25px;
		width:440px;
		h2{ @include font-1; line-height:1.0; font-size:40px; color:#9d9d9d; span{ font-weight:bold; font-size:53px; }}
		p{ color:#646464; margin:10px; font-size:16px; line-height:22px;}
		#btnWelcome{ 
			text-indent:-9999px; 
			@include bg('imgClickhere.png');
			width:136px;
			height:32px;
			display:block;
			&:hover{ background-position:-139px 0;}
		}

	}
	.main-slider{
		ul{ margin:0; padding:0;}
		li{
			display:block;
			width:978px;
			height:300px;
			a{
				 display:block;				 
				 img{ max-width:978px; max-height:300px;
				 	@include border-radius(6px);
				 	border:1px solid #e0e0e0;
				 	-moz-background-clip: padding;
					  /* Firefox 3.6 */
					  -webkit-background-clip: padding-box;
					  /* Safari 4? Chrome 6? */
					  background-clip: padding-box;
					  /* Firefox 4, Safari 5, Opera 10, IE 9 */
				 } 
			}
		}
	}
	#home-slider-nav{
		position:absolute;
		z-index:100;
		right:10px;
		bottom:10px;
		#home-nav-wrapper{
			margin:0; padding:0;
			li{
				float:left;
				margin-right:4px;
				@include bg('imgSlider-nav.png',-14px,0);
				&.activeSlide, &:hover{
					background-position:0 0;
				}
				a{					
					width:11px;
					height:11px;
					display:block;					
					text-indent:-9999px;
				}
			}
		}
	}
	.slider2{
		display:block;
		#slider2{
			display:block;
			ul{ margin:0; padding:0;}
			a{ display:block; }
			li{ 
				display:block; width:978px; height:161px;
				img{
					display:block;
					max-width:978px;
					max-height:161px;
					@include border-radius(6px);
				 	border:1px solid #e0e0e0;
				 	-moz-background-clip: padding;
					  /* Firefox 3.6 */
					  -webkit-background-clip: padding-box;
					  /* Safari 4? Chrome 6? */
					  background-clip: padding-box;
					  /* Firefox 4, Safari 5, Opera 10, IE 9 */
				}
			}
		}
	}
}
/***************** HOMEPAGE SETTING ********************/
#homepage{
	display:block;
	.hp-col{ float:left;  }
	#hp-col1{ 
		width:320px;
		a#hp-button-1{ display:block; text-indent:-9999px;
			@include bg('imgButton-1.png');
			width:320px;
			height:62px;
			&:hover{ background-position:0 -76px;}
		}
		#hp-col-1-wrapper{
			display:block;
			background-color:#FFF;
			margin:11px 0 0 0;
			@include border-radius(5px);
			border:1px solid #e0e0e0;
			img{ float:left; width:118px; margin:10px 0 0 12px;}
			#hp-col-1-right{
				float:left;
				width:170px;
				height:99px;
				margin:20px 0 0 5px;
				@include bg('imgSplitter-2.png',left,center);
				padding-left:10px;
				ul{ 
					margin:0; padding:0;
					li{ 
						display:block;
						margin:5px 0 7px 0;
						color:#858585;
						padding-left:33px;
						font-size:11px;
						a{ display:block; &:hover{ text-decoration:underline;} }
						&#col-home{ @include bg('imgHome.png'); }
						&#col-phone{ @include bg('imgCellphone.png',5px,0); height:17px; }
						&#col-mail{ @include bg('imgMail.png');  height:14px;}
						a, span{ color:#91b301;}
					}
				}
			}			
		}
	}
	#hp-col2{ 
		width:316px; @include border-radius(5px); border:1px solid #e0e0e0;
		margin-left:11px;
		#hp-col-2-wrapper{
			display:block;
			background-color:#FFF;
			height:190px;
			overflow:hidden;
			@include border-radius(5px);
			border:1px solid #ececec;
			h3{
				text-align:center;
				color:#000;
				font-size:22px;
				margin:13px 0 10px 0;
				@include font-1;
			}
			.col-2-l{ float:left; margin-left:15px;}
			.col-2-r{ float:right; margin-right:15px;}
			ul{
				margin:0; padding:0;
				li{
					@include bg('imgDot-1.png',left,center);
					padding-left:20px;
					color:#858585;
					margin:9px 0;
					a{
						color:#858585;
						&:hover{
							text-decoration:underline;
							color:#506200;
						}
					}
				}
			}
		}
	}
	#hp-col3{ 
		width:318px; @include border-radius(5px); border:1px solid #e0e0e0;
		height:190px;
		overflow:hidden;
		float:right;
		background-color:#FFF;
		h3{
			text-align:center;
			color:#000;
			font-size:22px;
			margin:13px 0 10px 0;
			@include font-1;
		}
		#col-3-l{ float:left; margin-left:5px;  margin-top:3px;}
		#col-3-r{ float:left; width:212px; margin-left:10px; margin-top:3px;
			p{ color:#858585; font-size:13px;  line-height:18px;}
		}
	}
}
.read-more{ 
	display:block; text-indent:-9999px;
	@include bg('imgReadmore.png');
	width:93px;
	height:24px;
	&#rm-1{ margin-left:15px;}
	&#rm-2{ margin-top:10px;}
}
/***************** TEMPLATE SETTING *********************/
.template{ 
	display:block; 
	color:#666666; 
	.tpl-left{ float:left; width:220px;}
	.tpl-right{ float:left; width:745px; margin-left:13px;	}
	.tpl-full{ display:block;	}
	img.imgTemp{ float:left; margin:0 10px 10px 0; border:1px solid #d7d7d7;}
	img.imgTemp-sitemap{ border:none;}
	h1{ font-size:24px; color:#535353; margin-bottom:5px;}
	p{ line-height:18px;}
}
/***************** HELPDESK SETTING ********************/
#helpdesk-wrapper{
	display:block;
	p#helpdesk-intro{  color:#767676;
		span{ text-decoration:underline; font-weight:bold;}}

	.eachHelpdesk-wrapper{ float:left; width:710px;}	
	#question-temp{ float:left; margin-top:315px; margin-left:10px;}
	.eachHelpdesk{
		display:block;
		margin-bottom:15px;
		background-color:#FFF;
		border:2px solid #c2bfbf;
		.eachHelpdesk-header{
			display:block;
			background-color:#5f6062;
			h3{ float:left; color:#FFF; font-weight:bold; font-size:14px; margin-left:10px;}
			a.btnQuestion{ float:right; display:block; 
				@include bg('imgQuestion_small.png');
				width:16px;
				height:16px;
				text-indent:-9999px;
				margin:3px 3px 0 0;
			}
		}
		.eachHelpdesk-body-1{
			padding:10px 0;
			input{ @include border-radius(5px); border:1px solid #5f6063; height:22px; line-height:22px; float:left; margin-left:10px; background-color:#dde6f3;}
			a#btnSubmit-sessionkey{ float:left; }
		}
		.eachHelpdesk-body-2{
			padding:10px 0;
			.eachHelpdesk-row{ margin:8px 0;}
			label{ float:left;  width:250px; text-align:right; margin-right:10px;}
			input{ @include border-radius(5px); border:1px solid #5f6063; height:22px; line-height:22px;}
			input, select{ float:left; width:300px; background-color:#dde6f3;}
			select{ @include border-radius(5px); border:1px solid #5f6063; height:22px; line-height:22px; width:302px;}
			textarea{ 
				width:300px; height:170px; resize:none; overflow:auto; background-color:#dde6f3; 
				@include border-radius(5px); border:1px solid #5f6063;
				font-family:Arial, Helvetica, sans-serif;
			}

		}
		a.btnSubmit{ 
			background-color:#ff5500; 
			color:#FFF;
			padding:3px 5px;
			@include border-radius(5px);
			border:1px solid black;
			&#btnSubmit-sessionkey{ margin-left:5px;}
			&#btnSubmit-issue{ margin-left:260px;}
		}

	}
}
/***************** SERVICE SETTING ********************/
#service-list{
	display:block;
	background:#eeeeee;
	border:1px solid #dedede;
	width:216px;
	@include border-radius(0 0 7px 7px);
	ul#lstSupport{
		margin:0; padding:0;
		li{
			height:28px;			
			a{
				font-size:13px;
				color:#949191;
				line-height:28px;
				padding-left:21px;
				font-family: Helvetica, Arial, sans-serif;
				@include bg('imgArrow-3.png',8px,center);
				&:hover{ color:#556606;}
			}
			&.current-service{ 
				background:#9ec300;
				a{
					color:#FFF;
					@include bg('imgArrow-1.png',8px,center);
				}
			}
		}
	}

}
/***************** SITEMAP SETTING ********************/
#sitemap-link{
	float:left;
	width:425px;
	height:353px;
	position:relative;
	margin-top:8px;
	@include bg('imgSitemap.png');
	a{ 
		position:absolute; 
		display:block; background-color:#9ec300; 
		padding:3px 12px;
		color:#FFF;
		font-size:18px;
		@include border-radius(7px);

	 }
	#sitelink-1{ left:27px; top:187px;}
	#sitelink-2{ left:230px; top:-3px;}
	#sitelink-3{ left:230px; top:59px;}
	#sitelink-4{ left:230px; top:109px;}
	#sitelink-5{ left:230px; top:166px;}
	#sitelink-6{ left:230px; top:213px;}
	#sitelink-7{ left:230px; top:267px;}
	#sitelink-8{ left:230px; top:323px;}
}
/***************** CONTACT SETTING ********************/
#contact-wrapper{
	display:block;
	.contact-left{ 
		float:left; width:320px; 
		background-color:#FFF;
		border:1px solid #e0e0e0;
		@include border-radius(7px);
	}
	.contact-right{
		float:left;
		width:600px;
		margin-left:10px;
		background-color:#FFF;
		border:1px solid #e0e0e0;
		@include border-radius(7px);	
	}
}
.contact-left{
	min-height:254px;
	#contact-logo-temp{ display:block; margin:30px 0 0 50px; }
	ul#contact-info{
		margin:25px 15px 0 15px; padding:0;

		li{
			display:block;
			@include bg('imgShadow-1.png',center,bottom);			
			padding:6px 0;
		}
		p{
			margin:0;
			line-height:18px;
			padding-left:35px;
			&#contact-home{ @include bg('imgHome.png',left,5px); }
			&#contact-phone{ @include bg('imgCellphone.png',5px,8px);}
			&#contact-mail{ @include bg('imgMail.png',left,9px); }
			span, a { color:#9ec300;}
		}
	}
}
.contact-right{
	padding:10px;
	#contact-form{
		input{ 
			border:1px solid #c5c5c5; width:350px;
			height:25px;
			line-height:25px;
			margin-bottom:5px;
			padding:0 5px;
		}
		textarea{ border:1px solid #c5c5c5; 
			width:350px;
			padding:0 5px;
			font-family:Arial, Helvetica, sans-serif;
			resize:none;
			overflow:auto;
			height:90px;
			font-size:13px;
		}
		#contact-submit{
			display:block;
			margin:6px 0 0 0; 
			a, input{ float:left; }
			a#contact-send{
				display:block;text-indent:-9999px;
				@include bg('imgContact-submit.png');
				width:86px;
				height:23px;
				text-indent:-9999px;
			}
			input#contact-reset{
				@include bg('imgContact-submit.png',-92px,0);
				height:23px;
				width:86px;
				text-indent:-9999px;
				border:none;
				margin-left:5px;
				cursor:pointer;
			}
		}		
	}
}
/***************** GALLERY SETTING ********************/
.gallery-wrapper{
	display:block;
	ul#gallery-list{
		margin:0; padding:0;
		li{
			position:relative;
			z-index:10;
			float:left;
			width:174px;
			height:117px;
			margin:0 11px 11px 0;
			a{ display:block;	}
			a.mainImage{
				width:174px;
				height:117px;
				img{
					display:block;
					width:172px;
					height:115px;
					border:1px solid #afcb32;
				}
			}
			a.zoomIcon{
				position:absolute;
				top:1px;
				left:1px;
				width:172px;
				height:115px;
				opacity:0;
			}
		}		
	}
} 
/***************** WEBSHOP SETTING ********************/
.webshop-header{
	display:block;
    width: 980px;
    margin:15px auto 0;
	position:relative;
	z-index:1;
	background-color:#FFF;
	border:1px solid #e0e0e0;
	@include border-radius(7px);
	.webshop-info{ 
		float:left; width:650px;
		margin:20px 0 0 20px;
		h1{ font-weight:bold; color:#6e6e6e; font-size:30px;
			@include font-1;
			margin-bottom:5px;
		}
		p{ color:#595959; line-height:17px;}
	}
	.webshop-img{ 
		float:right;
		margin-right:5px;
		img{ display:block; max-width:270px; max-height:210px;}
	}
	a#btnWebshop-contact{
		display:block; text-indent:-9999px; 
		position:absolute;
		bottom:15px;
		left:20px;		
		width:171px;
		height:32px;
		@include bg('btnContact.png');
		&:hover{ background-position:-180px 0;}
	}

}
#webshop-list-item{ display:block; margin-bottom:50px; overflow:hidden;}
.eachProduct{ 
	display:block; float:left; border:1px solid #e0e0e0; background-color:#FFF;
	@include border-radius(7px);
	padding:5px 10px 0 10px;
	width:215px;
	margin:11px 10px 0px 0;
	height:200px;
	overflow:hidden;
	h2{ font-weight:bold; font-size:16px; @include font-1; 
		color:#3b3b3b;
		margin-bottom:5px;
		a{ color:#3b3b3b; display:block; font-weight:bold; font-size:16px;}
	}
	p{ line-height:17px; height:50px; overflow:hidden; font-size:12px; color:#595959;  margin:0;}
	a{ display:block; 
		img{ max-width:205px; max-height:105px; }
	}
}
.eachProduct-right{ float:right; margin-right:0;}
/***************** PRODUCT DETAIL SETTING ********************/
#webshop-prd-detail{
	display:block;
	margin:15px 0;
	img.prd-image{ float:left; margin:0 10px 0px 0; max-width:343px; max-height:263px;
		border:1px solid #e0e0e0;
	}
	h1{ font-weight:bold; @include font-1; font-size:23px; margin-bottom:5px;}
	p{ line-height:17px; color:#595959; }
}
.btnBack{ display:block; text-indent:-9999px; 
	@include bg('btnBack.png');
	width:106px;
	height:32px;
	&:hover{ background-position:-117px 0;}
}
/***************** CONTACT SETTING ********************/